<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>User</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jquery.serializejson.min.js"></script>

</head>

<body>
    <table id="dg"></table>
    <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed: true" style="width:400px;height:200px;padding:10px">
        <form id="ff" style="width: 370px">
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="name" style="width:80%" data-options="label:'Name:',required:true">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="password" style="width:80%" data-options="label:'Password:',required:true">
            </div>

        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>

    <script>
        var id = 0;

        $('#dg').datagrid({
            url: 'http://localhost:3000/users/list',
            method: 'post',
            fit: true,
            pagination: true,
            columns: [[

                { field: 'ck', checkbox: true },
                { field: 'name', title: 'Name', width: 100 },
                {
                    field: '_id', title: '操作', width: 80,
                    formatter: function (value, row, index) {

                        return "<a onclick=deleteRecord('" + row._id + "')>删除</a> <a onclick=editRecord('" + JSON.stringify(row) + "')>修改</a>"
                    }
                }
            ]],
            toolbar: [{
                text: '新增',
                iconCls: 'icon-add',
                handler: function () {
                    $('#dlg').dialog('open')
                }
            }, {
                text: '多个删除',
                iconCls: 'icon-cut',
                handler: function () {
                    deleteRecords();
                }
            }]
        })


        $(" #editRow ").click(function () {
            console.log('editRow')
            $('#dg').datagrid('updateRow', {
                index: 2,
                row: {
                    productid: 'new name',
                    productname: 'new note message'
                }
            });
        })


        function submitForm() {
            $('#ff').form('submit', {
                onSubmit: function () {

                    // 新增和修改是同一个submit



                    var checkFormValidate = $(this).form('enableValidation').form('validate');
                    if (checkFormValidate) {

                        if (id !== 0) {
                            // 修改
                            $.ajax({
                                url: 'http://localhost:3000/users/data/' + id,
                                method: 'put',
                                data: $('#ff').serializeJSON()
                            }).done(function (res) {
                                console.log(res)
                                $("#dlg").dialog('close');
                                $("#dg").datagrid('reload');
                            })
                        } else {
                            // 新增
                            $.ajax({
                                url: 'http://localhost:3000/users/data',
                                method: 'post',
                                data: $('#ff').serializeJSON()
                            }).done(function (res) {
                                console.log(res)
                                $("#dlg").dialog('close');

                                $("#dg").datagrid('reload');
                            })
                        }


                    } else {

                    }

                    // return $(this).form('enableValidation').form('validate');
                }
            });
        }
        function clearForm() {
            $('#ff').form('clear');
        }

        function deleteRecord(id) {
            alert(id)
            $.ajax({
                type: 'delete',
                url: 'http://localhost:3000/users/data/' + id
            }).done(function (res) {
                $.messager.show({
                    title: '信息显示',
                    msg: res.message,
                    showType: 'show'
                });

                $("#dg").datagrid('reload');// 在另三方对表格进行操作
            })

        }

        function deleteRecords() {
            // 找到选中的checkbox记录
            // alert('找到选中的checkbox记录')
            var selections = $("#dg").datagrid('getSelections');
            var ids = [];
            for (var i = 0; i < selections.length; i++) {
                ids.push(selections[i]._id);
            }
            ids = ids.toString();
            $.ajax({
                url: 'http://localhost:3000/users/removes',
                type: 'post',
                data: {
                    ids: ids
                }
            }).done(function (res) {
                $.messager.show({
                    title: '信息显示',
                    msg: res.message,
                    showType: 'show'
                });
                $("#dg").datagrid('reload');// 在另三方对表格进行操作
            })

        }

        function editRecord(rows) {
            $('#dlg').dialog('open')
            var rows = JSON.parse(rows);
            id = rows._id;
            $('#ff').form('load', rows);

        }
    </script>
</body>

</html>